<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
        <title>JQuery and Google Maps</title>
        <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAApcDGzmRx_FhPyC57ge7mlhSbNreEXLUnd3NpE4zWTVxoy2uM8RSSVrk0cC2offNv2UASgDTxvjRBhA"></script>
        <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="js/gvmaps.js"></script>
        <script type="text/javascript">
            
            $(function(){
                $('#map').gvmap().showMap()




                //$('#map').gvmap().latitude(41.875696).longitude(-87.624207).zoom(11).showMap()
                $('#brazil').click(function(){
                    $('#map').latitude(-12.726084296948184).longitude(-54.052734375).zoom(4).centerMap()
                })
                $('#itaim').click(function(){
                    //$('#map').zoom(15).query('Av. Dr. Cardoso de Mello, São Paulo - SP - Brazil')
                    $('#map').zoom(15).query(
                        'Av. Dr. Cardoso de Mello, São Paulo - SP - Brazil', 
                        $.gvmarker("Agence", true, 'img/custom_icon.png')
                    )
                })


            })
        </script>
        <style type="text/css">
        #map{
            height:300px;
            width:500px;
        }
        </style>
    </head>
    <body>
        <div id="map" latitude="41.875696" longitude="-87.624207" zoom="11">
        </div>
        <button id="brazil" type="button">Go to Brazil</button>
        <button id="itaim" type="button">Go to Av. Dr. Cardoso de Mello, São Paulo - SP - Brazil</button>
    </body>
</html>
